<template>
  <div id="productDetails">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="top">
        <a href="javascript:;">
          <img src="@/assets/img/new/logo@2x.png" alt />
          <i>USDT {{$t('m.plan')}}</i>
        </a>
      </div>
      <div class="xian"></div>
      <div class="content">
        <div>
          <h2>{{$t('m.income')}}{{$t('m.amount')}}</h2>
          <p style="padding-left:.5rem;">
            <i>92 USDT</i>
          </p>
          <h2>{{$t('m.handlingFee')}}</h2>
          <p style="padding-left:.5rem;">
            <i>4 USDT</i>
          </p>
          <span>{{$t('m.tips15_21')}}</span>
        </div>
        <div class="sub">
          <a href="javascript:;" @click="sub">{{$t('m.confirm')}}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      userObj: {}
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      if (res.code == "0000") {
        this.userObj = res.user;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        sessionStorage.setItem("loginBack", true);
        this.$router.push(`/login`);
      }
    });
    this.changeTitle(this.$t("m.redemption"));
  },
  components: { Header },
  computed: {},
  mounted() {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    sub() {
      Services.transferAccounts({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          Toast(this.$t("m.successfulRedemption"));
          this.$router.push(`/home`);
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#productDetails {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #434551;
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow-y: scroll;
    .top {
      padding: 0.3rem 0;
      height: 1.4rem;
      background: #434551;
      a {
        background: #2d2f3b;
        display: flex;
        height: 0.8rem;
        width: 100%;
        padding: 0 0.3rem;
        color: #fff;
        align-items: center;
        img {
          width: 0.5rem;
          margin-right: 0.1rem;
          height: 0.5rem;
        }
      }
    }
    .content {
      color: #fff;
      background: #434551;
      min-height: calc(100% - 1.4rem);

      div {
        margin-bottom: 0.1rem;
        h2 {
          font-size: 0.36rem;
          color: #c0c1c4;
          margin-bottom: 0.2rem;
          padding: 0.2rem 0.3rem 0;
        }
        p {
          display: flex;
          align-items: center;
          font-size: 0.32rem;
          font-weight: 700;
          padding: 0 0 0.2rem 0.5rem;
          border-bottom: 0.01rem solid #ccc;
          img {
            width: 0.5rem;
            margin-right: 0.2rem;
            height: 0.5rem;
          }
        }
        span {
          color: #fff;
          padding: 0 0.3rem;
          padding-top: 0.2rem;
          display: flex;
        }
        &.sub {
          display: flex;
          justify-content: center;
          margin: 2rem 0 0;
          align-items: center;
          > a {
            display: inline-block;
            width: 6.6rem;
            height: 0.85rem;
            line-height: 0.85rem;
            font-size: 0.32rem;
            letter-spacing: 0.05rem;
            text-align: center;
            border-radius: 0.1rem;
            color: #fff;
            /*background: #30323e;*/
            background: #912cee;
          }
        }
      }
    }
  }
}
</style>